<template>
  <div>
    <!-- 头部 -->
    <el-row>
      <el-col :span="12">
        <div class="title">工程信息：</div>
      </el-col>
      <el-col :span="12">
        <div class="my_button">
          <!-- 添加展开按钮，点击时触发 toggleShowAll 函数 -->
          <el-button type="success" size="small" icon="el-icon-sort"
                     @click="toggleShowAll" :disabled="disabled">{{ showAll ? "收起" : "展开" }}
          </el-button>
          <el-button type="primary" size="small" icon="el-icon-edit"
                     @click="editing" :disabled="disabled">编辑
          </el-button>
        </div>
      </el-col>
    </el-row>

<!-- 工程信息表单 -->
<!--    <template v-if="engInfo && Object.keys(engInfo).length > 0">-->
<!--      <el-form :label-position="'right'" label-width="160px" :model="engList">-->
<!--        <el-row :gutter="10" style="margin-top: 20px">-->
<!--          <template v-for="comment in visibleCommentList">-->
<!--            <el-col :key="comment.columnname" :span="12" class="form-col" v-if="comment.columncomment !== ''">-->
<!--              <el-form-item :label="comment.columncomment + '：'">-->
<!--                <div class="table-content">-->
<!--                  {{ engList[comment.columnname] }}-->
<!--                </div>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </template>-->
<!--        </el-row>-->
<!--      </el-form>-->
<!--    </template>-->
<!--    <template v-else>-->
<!--      <el-empty description="无工程信息"></el-empty>-->
<!--    </template>-->
    <!-- 编辑弹窗 -->
    <el-dialog title="工程信息编辑：" :visible.sync="dialogVisible" width="70%" center>
      <div class="dialog-content">
        <el-form :model="tempEngList">
          <el-row>
            <template v-for="comment in tempCommentList">
              <el-col :key="comment.columnname" :span="12" v-if="comment.columncomment !== ''">
                <el-form-item :label="comment.columncomment + '：'">
                  <el-input class="custom-input" v-model="tempEngList[comment.columnname]"/>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetDialogData">恢复</el-button>
        <el-button type="primary" @click="saveDialogData">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getEngCommentInfo, updateEngInfo} from "@/api/system/enginfo";

export default {
  props: {
    selectInfo: Object,
  },
  data() {
    return {
      disabled: true,
      engList: {},
      showAll: false, // 是否显示全部工程信息
      visibleCommentList: {}, // 可见的工程字段
      // 默认可见的工程字段
      defaultCommentList: ['工程名称', '工程号', '移交单位', '开工时间', '竣工时间', '案卷数',
        '工程地点', '立项批准单位', '建设单位', '施工单位', '设计单位', '勘察单位',
        '监理单位', '立项批准文号', '用地规划许可证号', '规划许可证号', '施工许可证号', '项目经理'],
      tempEngList: {}, // 编辑弹窗中临时保存的数据
      tempCommentList: {}, // 编辑弹窗中可编辑字段
      engCommentList: null, //工程字段信息和注释
      isEditing: false, // 是否处于编辑状态
      dialogVisible: false, // 编辑弹窗是否可见
    };
  },
  watch: {
    // selectInfo(newValue) {
    //   console.log(newValue)
    // },
    selectInfo: {
      immediate: true, // 在组件创建时立即执行一次
      handler(newVal) {
        console.log(newVal)
        // this.engList = {...newVal}; // 使用对象的深拷贝方式赋值
        // this.tempEngList = {...newVal}; // 初始化编辑弹窗中的临时数据
        // this.disabled = !(this.engInfo && Object.keys(this.engInfo).length > 0);
      },
    },
    // engInfo: {
    //   immediate: true, // 在组件创建时立即执行一次
    //   handler(newVal) {
    //     this.engList = {...newVal}; // 使用对象的深拷贝方式赋值
    //     this.tempEngList = {...newVal}; // 初始化编辑弹窗中的临时数据
    //     this.disabled = !(this.engInfo && Object.keys(this.engInfo).length > 0);
    //   },
    // },
  },
  created() {
    this.getEngComment().then(() => {
      this.transferComment();
    });
  },
  methods: {
    /** 转换类别数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.classId,
        label: node.className,
        children: node.children
      };
    },
    //转换可见的属性
    transferComment() {
      if (this.showAll) {
        this.visibleCommentList = this.engCommentList.filter(
          (comment) => comment.columncomment !== ""
        );
      } else {
        const nonEmptyComments = this.engCommentList.filter(
          (comment) => comment.columncomment !== ""
        );
        this.visibleCommentList = [];
        for (let i = 0; i < nonEmptyComments.length; i++) {
          if (this.defaultCommentList.includes(nonEmptyComments[i].columncomment)) {
            this.visibleCommentList.push(nonEmptyComments[i]);
          }
        }
      }
    },
    // 切换展开按钮的状态，显示全部工程信息或部分工程信息
    toggleShowAll() {
      this.showAll = !this.showAll;
      this.transferComment();
    },
    // 下划线转驼峰命名
    underscoreToCamel(str) {
      return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
    },
    //获取工程字段信息和注释
    getEngComment() {
      return getEngCommentInfo()
        .then((res) => {
          // this.engCommentList = res;
          this.engCommentList = res.map(comment => ({
            columncomment: comment.columncomment,
            columnname: this.underscoreToCamel(comment.columnname), // 转换属性名
          }));
        })
        .catch((error) => {
          this.$message.error("获取工程信息注释失败：" + error);
        });
    },
    editing() {
      const nonEmptyComments = this.engCommentList.filter((comment) => comment.columncomment !== "");
      this.tempCommentList = [];
      for (let i = 0; i < nonEmptyComments.length; i++) {
        if (this.defaultCommentList.includes(nonEmptyComments[i].columncomment)) {
          this.tempCommentList.push(nonEmptyComments[i]);
        }
      }
      this.isEditing = true;
      this.dialogVisible = true;
    },
    resetDialogData() {
      this.tempEngList = {...this.engList};
    },
    saveDialogData() {
      this.$confirm("确认修改吗？", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.isEditing = false;
        // 调用 updateEngInfo 方法，并传入 tempEngList 数据
        updateEngInfo(this.tempEngList).then(() => {
          this.$message.success("保存成功！");
          // 如果保存成功，将 tempEngList 的数据同步到 engList
          this.$emit("updateEngInfo");
          this.engList = {...this.tempEngList};
          this.dialogVisible = false;
        }).catch((error) => {
          this.$message.error("保存失败：" + error);
          this.dialogVisible = false;
        });
      }).catch(() => {
        // 取消保存
        this.$message.info("已取消保存");
      });
    },
  },
};
</script>

<style>
.title {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: rgb(26, 115, 198);
  white-space: nowrap; /* 让文字不换行，保持在一行内显示 */
}

.my_button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my_button button {
  margin-left: 10px; /* 增加左边距 */
  margin-right: 10px; /* 增加右边距 */
}

.dialog-content {
  max-height: 500px; /* 设置最大高度，内容区域超出时会出现滚动条 */
  overflow-y: auto; /* 内容区域出现滚动条 */
}

.dialog-footer {
  position: sticky;
  bottom: 0;
  padding: 10px;
}

.custom-input {
  width: 98%; /* 设置输入框的宽度，根据实际情况调整 */
}
</style>

